<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-page-header class="title-row" @back="goCenter" content="差异比对"></el-page-header>
          <br />
        </div>
        <div>
            <el-form :inline="true" label-width="120px" :model="than">
                <el-form-item label="选择集群">
                    <el-select v-model="than.cluster" placeholder="请选择集群" @change="getChildren">
                      <el-option v-for="item in clusterList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="选择子集群">
                    <el-select v-model="than.children" placeholder="请选择子集群" @change="getVersion">
                      <el-option v-for="item in childrenList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="选择时间">
                    <el-select v-model="than.base" placeholder="请选择基线" >
                      <el-option v-for="item in baseList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <br>
                <el-form-item label="选择集群">
                    <el-select v-model="than.cluster1" placeholder="请选择集群" @change="getChildren1">
                      <el-option v-for="item in clusterList" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="选择子集群">
                    <el-select v-model="than.children1" placeholder="请选择子集群" @change="getVersion1">
                      <el-option v-for="item in childrenList1" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="选择时间">
                    <el-select v-model="than.base1" placeholder="请选择基线">
                      <el-option v-for="item in baseList1" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>
                <!-- <br>
                <el-form-item label="选择集群">
                    <el-select v-model="than.cluster2" placeholder="请选择集群">
                      <el-option v-for="item in clusterList" :label="item" :value="item" />
                    </el-select>
                </el-form-item>
                <el-form-item label="选择时间">
                    <el-select v-model="than.base2" placeholder="请选择基线" @change="checkLine2">
                      <el-option v-for="item in baseList" :label="item" :value="item" />
                    </el-select>
                </el-form-item> -->
            </el-form>
            <div style="margin-left:95%">
              <el-button size="mini" type="primary" @click="query">确定</el-button>
            </div>
        </div>
        <el-card v-if="flag">
          <div v-loading="loadFlag">
            <div class="title-row">
              <span class="title-row-bar" />集群基线比对
              <el-button size="mini" type="primary" style="float:right" @click="loadData">对比下载</el-button>
            </div>
            <el-row>
              <span v-if="nowList.length=='0'&&this.loadFlag==false" style="font-size:16px">暂无数据</span>
              <el-col :span="10">
                <el-form :inline="true" label-width="200px" v-for="(item,index) in nowList">
                  <div style="height:150px;position: relative;overflow: hidden;">
                    <!-- 左侧整体数据中的名称 -->
                    <el-form-item :label="item.displayName" style="position: absolute;left:0;top:0;right:-27px;bottom:0;overflow-y:scroll">
                      <!-- 小单元名称 -->
                        <div v-if="nowData[index].length>0">{{nowData[index][0].categoryName}}</div>
                        <!-- 类型为radio时显示的内容 -->
                        <el-radio-group v-model="nowData[index][0].currentValue" style="display:flex;flex-direction:column" v-if="item.type=='RADIO'&&nowData[index].length>0">
                          <el-radio v-for="item in nowData[index][0].validValues" :label="item.value">{{ item.label }}</el-radio>
                        </el-radio-group>
                        <!-- 类型为text时显示的内容 -->
                        <el-input v-model="nowData[index][0].currentValue" v-if="item.type=='TEXT'&&nowData[index].length>0"></el-input>
                        <div style="display:flex;flex-direction:column">
                          <!-- 类型为checkbox时显示的内容 -->
                          <el-checkbox v-for="val in nowData[index]" :label="val.contextName" v-model="val.currentValue" v-if="item.type=='CHECKBOX'&&nowData[index].length>0"></el-checkbox>
                        </div>
                        <!-- 类型为textarea时 -->
                        <el-input v-model="nowData[index][0].currentValue" type="textarea" v-if="item.type=='TEXTAREA'&&nowData[index].length>0" style="width:200px"></el-input>
                        <!-- 类型为DUAL_THRESHOLD时 -->
                        <div v-if="item.type=='DUAL_THRESHOLD'&&nowData[index].length>0">
                          <div v-for="(res) in nowData[index]">
                              {{res.contextName}}
                              <br>
                              严重：<el-input v-model="res.defaultValueMap.critical" />
                              <br>
                              警告：<el-input v-model="res.defaultValueMap.warning" />
                          </div>
                        </div>
                        <!-- 类型为LOG_EVENT_WHITELIST时 -->
                        <div v-if="item.type=='LOG_EVENT_WHITELIST'&&nowData[index].length>0">
                            <div v-for="(tag,num) in nowData[index]">
                                {{tag.contextName}}
                                <br>
                                <div v-for="val in tag.defaultValueMap.rules">
                                  <el-form-item label="比率">
                                    <el-input style="width:200px" v-model="val.rate"></el-input>
                                  </el-form-item>
                                  <br>
                                  <el-form-item label="周期">
                                    <el-input style="width:200px" v-model="val.periodminutes"></el-input>分钟
                                  </el-form-item>
                                  <br>
                                  <el-form-item label="阈值">
                                    <el-input style="width:200px" v-model="val.threshold"></el-input>
                                  </el-form-item>
                                  <br>
                                  <el-form-item label="内容">
                                    <el-input style="width:200px" type="textarea" v-model="val.content"></el-input>
                                  </el-form-item>
                                  <br>
                                  <el-form-item label="异常类型">
                                    <el-input style="width:200px" v-model="val.exceptiontype"></el-input>
                                  </el-form-item>
                                  <hr/>
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                  </div>
                </el-form>
              </el-col>
              <el-col :span="10">
                <el-form :inline="true" label-width="200px" v-for="(item,index) in oldList">
                  <div style="height:150px;position: relative;overflow: hidden;">
                    <el-form-item :label="item.displayName" style="position: absolute;left:0;top:0;right:-27px;bottom:0;overflow-y:scroll">
                        <div v-if="oldData[index].length>0">{{oldData[index][0].categoryName}}</div>
                        <el-radio-group v-model="oldData[index][0].currentValue" style="display:flex;flex-direction:column" v-if="item.type=='RADIO'">
                          <el-radio v-for="item in oldData[index][0].validValues" :label="item.value">{{ item.label }}</el-radio>
                        </el-radio-group>
                        <el-input v-model="oldData[index][0].currentValue"   v-if="item.type=='TEXT'"></el-input>
                        <div style="display:flex;flex-direction:column">
                          <el-checkbox v-for="val in oldData[index]" :label="val.contextName" v-model="val.currentValue" v-if="item.type=='CHECKBOX'"></el-checkbox>
                        </div>
                        <el-input v-model="oldData[index][0].currentValue" type="textarea" v-if="item.type=='TEXTAREA'" style="width:200px"></el-input>
                        <div v-if="item.type=='DUAL_THRESHOLD'&&oldData[index].length>0">
                          <div v-for="(res) in oldData[index]">
                              {{res.contextName}}
                              <br>
                              严重：<el-input v-model="res.defaultValueMap.critical" />
                              <br>
                              警告：<el-input v-model="res.defaultValueMap.warning" />
                          </div>
                        </div>
                        <div v-if="item.type=='LOG_EVENT_WHITELIST'&&oldData[index].length>0">
                          <div v-for="(tag,num) in oldData[index]">
                              {{tag.contextName}}
                              <br>
                              <div v-for="val in tag.defaultValueMap.rules">
                                <el-form-item label="比率">
                                  <el-input style="width:200px" v-model="val.rate"></el-input>
                                </el-form-item>
                                <br>
                                <el-form-item label="周期">
                                  <el-input style="width:200px" v-model="val.periodminutes"></el-input>分钟
                                </el-form-item>
                                <br>
                                <el-form-item label="阈值">
                                  <el-input style="width:200px" v-model="val.threshold"></el-input>
                                </el-form-item>
                                <br>
                                <el-form-item label="内容">
                                  <el-input style="width:200px" type="textarea" v-model="val.content"></el-input>
                                </el-form-item>
                                <br>
                                <el-form-item label="异常类型">
                                  <el-input style="width:200px" v-model="val.exceptiontype"></el-input>
                                </el-form-item>
                                <hr/>
                              </div>
                          </div>
                      </div>
                    </el-form-item>
                  </div>
                </el-form>
              </el-col>
              <el-col :span="4">
                <div v-for="item in buttonList" style="height:150px">
                  <el-button type="primary" v-if="nowData[item].length>0&&oldData[item].length>0" @click="contrast(item)">查看参数差异</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <el-dialog
          :close-on-click-modal="false"
          :before-close="defferCloses"
          :visible.sync="defferFlag"
          title="差异比较"
          width="1200px"
        >
          <iframe :src="contrastUrl" style="width:100%;height:600px" v-if="defferFlag" />
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>
<script>
  import parameter from '@/api/phaseTwo/parameter.js'
  import { parseTime, downloadFile } from '@/utils/index'
  export default {
    props: ["check","defferData"],
    data() {
      return {
        than:{
          cluster:'',
          children:'',
          base:'',
          cluster1:'',
          children1:'',
          base1:'',
          cluster2:'',
          base2:'',
          totals:[],
          total:[],
        },
        clusterList:[],
        childrenList:[],
        childrenList1:[],
        baseList:[],
        baseList1:[],
        flag:false,
        dataA:{},
        dataB:{},
        dataC:{},
        nowList:[],
        oldList:[],
        nowData:[],
        oldData:[],
        loadFlag:false,
        buttonList:[],
        defferFlag:false,
        contrastUrl:'',
        nowJson:[],
        oldJson:[],
        allData:null,
      };
    },
    created(){
      this.getCluster()
    },
    methods:{
      goCenter() {
        this.$emit("center",'0')
      },
      query(){
        this.nowList=[]
        this.oldList=[]
        this.buttonList=[]
        this.nowData=[]
        this.oldData=[]
        this.nowJson=[]
        this.oldJson=[]
        this.flag=true
        this.loadFlag=true
        parameter.contrast(this.than.cluster,this.than.children,this.than.base,'0',this.than.cluster1,this.than.children1,this.than.base1,'0').then((res)=>{
          this.allData=res
          this.loadFlag=false
          //数据遍历分为左侧数据数组与右侧数据数组
          res.forEach((item,index)=>{
            if(item[1].type!='REDACTION_POLICY'){
              //将左侧数据整体传入nowList
              this.nowList.push(item[1])
              //将右侧数据整体传入oldList
              this.oldList.push(item[2])
              //差异按钮对应相应数据标识
              this.buttonList.push(index)
            }
          })
          //左侧数据整体遍历
          this.nowList.forEach((item)=>{
            //取数据中存放内容信息的paramSpecValues传入nowData
              this.nowData.push(item.param)
              //为差异对比接口传输数据将原本json传入nowJson
              this.nowJson.push(item.paramSpecValues)
              if(item.type=='LOG_EVENT_WHITELIST'){
                console.log(item.param,"123");
              }
          })
          //右侧同左侧
          this.oldList.forEach((item)=>{
            this.oldData.push(item.param)
            this.oldJson.push(item.paramSpecValues)
          })
        })
      },
      getCluster(){
        this.clusterList=[]
        parameter.cluster().then((res)=>{
          res.forEach((item)=>{
            let obj={value:item.parentClusterID,label:item.parentCluster}
            this.clusterList.push(obj)
          })
          if(this.defferData){
            this.than.cluster=this.defferData.cmFlag
            this.getChildren()
          }
        })
      },
      getChildren(){
        this.than.children=''
        this.childrenList=[]
        parameter.getChildren(this.than.cluster).then((res)=>{
          res.forEach((item)=>{
            let obj={value:item.clusterFlag,label:item.clusterName}
            this.childrenList.push(obj)
            let arr=[]
            this.childrenList.forEach((val,index)=>{
              if(arr.indexOf(this.childrenList[index].value)==-1){
                arr.push(this.childrenList[index].value)
              }else{
                this.childrenList.splice(index,1)
              }
            })
          })
          if(this.defferData){
            this.than.children=this.defferData.clusterFlag
            this.getVersion()
          }
        })
      },
      getChildren1(){
        this.than.children1=''
        this.childrenList1=[]
        parameter.getChildren(this.than.cluster1).then((res)=>{
          res.forEach((item)=>{
            let obj={value:item.clusterFlag,label:item.clusterName}
            this.childrenList1.push(obj)
            let arr=[]
            this.childrenList1.forEach((val,index)=>{
              if(arr.indexOf(this.childrenList1[index].value)==-1){
                arr.push(this.childrenList1[index].value)
              }else{
                this.childrenList1.splice(index,1)
              }
            })
          })
        })
      },
      getVersion(){
        this.than.base=''
        this.baseList=[]
        parameter.getVersion(this.than.cluster,this.than.children).then((res)=>{
          res.forEach((item)=>{
            let obj={value:'',label:''}
            if(item.message!=''){
              obj.label=item.createTime+'('+item.message+')'
              obj.value=item.createTime.slice(0,10)
            }else{
              obj.label=item.createTime
              obj.value=item.createTime.slice(0,10)
            }
            this.baseList.push(obj)
          })
          if(this.defferData){
            this.than.base=this.baseList[this.baseList.length-1].value
          }
        })
      },
      getVersion1(){
        this.than.base1=''
        this.baseList1=[]
        parameter.getVersion(this.than.cluster1,this.than.children1).then((res)=>{
          res.forEach((item)=>{
            let obj={value:'',label:''}
            if(item.message!=''){
              obj.label=item.createTime+'('+item.message+')'
              obj.value=item.createTime.slice(0,10)
            }else{
              obj.label=item.createTime
              obj.value=item.createTime.slice(0,10)
            }
            this.baseList1.push(obj)
          })
        })
      },
      contrast(val){
        let obj={leftStr:this.nowJson[val].split(","),rightStr:this.oldJson[val].split(",")}
        parameter.getContrast(obj).then((res)=>{
          this.contrastUrl=process.env.VUE_APP_BASE_API+'/tangzhen/'+res
          this.defferFlag=true
        })
      },
      defferCloses(){
        this.defferFlag=false
      },
      loadData(){
        this.loadFlag=true
        let obj={listMap:this.allData,colonyNameA:this.than.cluster,colonyNameB:this.than.cluster1}
        parameter.downLoad(obj).then((res)=>{
          this.loadInfo(res)
          this.loadFlag=false
        })
      },
      loadInfo(val){
        let str=new Date().getFullYear()+'年'+val.split("年")[1].split(".xlsx")[0]
        let obj={path:val}
        parameter.downInfo(obj).then((res)=>{
          downloadFile(res,str,'xlsx')
        })
      }
    }
  }
</script>
<style scoped>
.border-div {
  position: relative;
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  border: 1px solid lightgray;
  border-radius: 15px;
  margin-bottom: 20px;
}
</style>